<template>
  <div>
    <div class="head" :class="{ on: is_head }">
      <div class="name" v-if="is_name">
        {{ title }}
      </div>
      <div class="container flex">
        <div class="logo" v-if="is_logo">
          <img src="../assets/images/logo-home.png" alt="" />
        </div>
        <div @click="go_back()" class="back" v-if="is_back">
          <img src="../assets/images/Group1_1.png" alt="" />
        </div>
        <div class="n_home" v-else>{{ titleLeft }}</div>

        <div class="flex1"></div>
        <slot name="right"></slot>
        <div class="kf" v-if="is_kf">
          <img src="../assets/images/icoi_kf.png" alt="" />
        </div>
        <div class="lang" v-if="is_lang" @click="path_url('/my/lang')">
          <img src="../assets/images/ico_lang.png" alt="" />
        </div>
        <div
          class="str"
          v-html="titleRight"
          v-if="is_right"
          @click="preserve"
        ></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      is_head: false,
    };
  },
  name: "titleCenter",
  props: {
    titleLeft: {
      default: "",
    },
    titleRight: {
      default: "",
    },
    is_name: {
      default: "",
    },
    title: {
      default: "",
    },
    is_notice: {
      default: "",
    },
    is_back: {
      default: false,
    },
    is_logo: {
      default: false,
    },
    is_custom_back: {
      default: false,
    },
    is_kf: {
      default: false,
    },
    is_lang: {
      default: false,
    },
    is_right: {
      default: "",
    },
  },
  created() {},
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },

  methods: {
    handleScroll() {
      let t = document.documentElement.scrollTop || document.body.scrollTop;
      if (t > 100) {
        this.is_head = true;
      } else {
        this.is_head = false;
      }
    },

    preserve() {
      this.$emit("preserve");
    },
    path_url(url) {
      this.$router.push(url);
    },
    go_back() {
      if (this.is_custom_back) {
        this.$emit("go_back");
      } else {
        this.$router.go(-1);
      }
    },
    go_notice_url() {
      this.$router.push("/notice/index");
    },
  },
};
</script>
<style lang="less" scoped>
.w856 {
  .head {
    width: 100%;
  }
}

.flex {
  align-items: center;
}

.head {
  // background: url("../assets/images/bg-html.png") no-repeat top center;
  // background-size: 100% auto;
  background: #101116;
  padding: 0.22rem 0;
  position: relative;

  &.on {
    background-size: 100% 100%;
  }

  .n_home {
    font-size: 0.32rem;
    line-height: 0.44rem;
    font-weight: 500;
    color: #ffffff;
  }

  .name {
    font-size: 0.32rem;
    font-weight: 500;
    color: #ffffff;
    position: absolute;
    width: 70%;
    text-align: center;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 50%;
    height: 100%;
    margin-left: -35%;
    display: flex;
    z-index: 0;
  }

  .notice {
    position: relative;

    img {
      height: 0.4rem;
    }

    span {
      position: absolute;
      background: #ee594b;
      border-radius: 50%;
      box-shadow: 0px 0.04rem 0.08rem 0px rgba(245, 56, 49, 0.31);
      color: #fff;
      font-size: 0.2rem;
      padding: 0 0.08rem;
      top: -0.1rem;
      right: -0.1rem;
    }
  }

  .back {
    img {
      height: 0.48rem;
    }
  }

  img {
    height: 0.4rem;
    vertical-align: middle;
  }

  .lang {
    margin-left: 0.2rem;
  }

  .str {
    margin-left: 0.26rem;
    font-size: 0.28rem;
    font-weight: 500;
    color: #fff;
    line-height: 0.4rem;

    /deep/ img {
      height: 0.4rem;
      vertical-align: top;
    }
  }
}

.logo {
  img {
    height: 0.41rem;
  }
}
</style>
